<template>
  <div class="app-container">
    <div class="cjdxq">
      <div class="steps">
        <el-steps :active="status"   align-center>
          <el-step title="经纪人提交合同"></el-step>
          <el-step title="招商部审核合同"></el-step>
          <el-step title="招商提交结算单"></el-step>
          <el-step title="平台审核结算单"></el-step>
        </el-steps>
      </div>

      <div class="detail">
        <div class="item">合同编号：{{data.contractCode}}</div>
        <div class="item">状态：{{data.auditStatus==3?'被拒绝':data.auditStatus==2?'待审核':data.auditStatus==4?'已收帐':''}}</div>
        <div class="item">招商部：{{data.organizationName}}</div>
        <div class="item">成交经纪人：{{data.dealAgent}}</div>
        <div class="item">承租方：{{data.tenantry}}</div>
        <div class="item">楼宇名称：{{data.buildName }}</div>
        <div class="item">房号：{{data.rooms}}</div>
      </div>

      <div class="price">
        <div class="item">月租金：{{data.monthlyRent}}￥</div>
        <div class="item">返佣比例：{{data.rebate}}</div>
        <div class="item">返佣金额：{{data.rebateAmount}}</div>
      </div>

      <div class="imgs">
        <div class="title">打款证明</div>
        <div class="img" v-if="data.enclosure !== ''">
          <img v-for="(item , i) in data.enclosure.split(',')" :src="item">
        </div>
      </div>

      <div class="liyou" v-if="data.auditStatus==4">
        <div class="item">结算单：{{data.settlementCode}}</div>
      </div>

      <div class="liyou" v-if="data.auditStatus==3">
        <div class="item">拒绝理由：{{data.reason}}</div>
      </div>


      <div class="buttons">
        <el-button @click="close">返回</el-button>
        <el-button type="primary" v-if="data.auditStatus==2" @click="dialogVisiblejj = true">拒绝</el-button>
        <el-button type="primary" v-if="data.auditStatus==2" @click="tongg">通过</el-button>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisiblejj"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form ref="formjj" :model="formjj" label-width="80px">
          <el-form-item label="拒绝理由" prop='reason' :rules="{required: true, message: '请输入拒绝理由', trigger: 'blur' }">
            <el-input type="textarea" rows="6" v-model="formjj.reason"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblejj = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('formjj')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="请谨慎操作! 确定招商部已支付该笔服务费！审核通过后佣金将自动到经纪人收益中心！" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="经纪人" width="150"></el-table-column>
        <el-table-column property="name" label="层级" width="200"></el-table-column>
        <el-table-column property="address" label="所得佣金占比"></el-table-column>
        <el-table-column property="address" label="所得佣金"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="tongg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listDealrecord, getDealrecord, delDealrecord, addDealrecord, updateDealrecord, exportDealrecord } from "@/api/dealrecord/dealrecord";
  export default {
    name: "DealrecordDetail",
    data() {
      return {
        data:{},
        id:0,
        status:4,
        dialogVisiblejj: false,
        formjj:{
          reason:''
        },
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
      }
    },
    created(){
      // var data=JSON.parse(decodeURIComponent(this.$route.query.data))
      var id=this.$route.query.id

      this.id=id
      this.getData()
    },
    methods:{
      getData(){
        getDealrecord(this.id).then(response => {
          this.data = response.data;
          if (this.data.auditStatus === 2){
            this.status = 3 ;
          }
        });
      },
      submitForm(formName) {
        var form={}
        form.id=this.id
        form.auditStatus=3
        form.reason=this.formjj.reason
        this.$refs[formName].validate((valid) => {
          if (valid) {
            updateDealrecord(form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.dialogVisiblejj = false;
                this.$router.back()
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //通过
      tongg(){
        var form={}
        form.id=this.id
        form.auditStatus=4
        updateDealrecord(form).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.dialogTableVisible = false;
            this.$router.back()
          }
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      /** 关闭按钮 */
      close() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({ path: "/dealrecord/dealrecord", query: { t: Date.now()}})
      }
    }
  }
</script>

<style scoped>
.cjdxq .detail{
  margin-top: 100px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom:1px solid #333;
}
.cjdxq .detail .item{
  width: 30%;
  line-height: 50px;
}
.cjdxq .price{
  /* margin-top: 100px; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* border-bottom:1px solid #333; */
}
.cjdxq .price .item{
  width: 30%;
  line-height: 50px;
}
.cjdxq .imgs{
  margin-top: 80px;
}
.cjdxq .imgs .img{
  margin-top: 10px;
}
.cjdxq .imgs img{
  width: 400px;
  height: 200px;
}
.cjdxq .buttons{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.cjdxq .liyou{
  margin-top: 30px;
}
</style>
